<template>
  <div class="index-box">
    <el-backtop :right="50" :bottom="100">
      <div
          style="
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        /*line-height: 40px;*/
        font-size: 13px;
        color: #1989fa;
      "
      >
        <el-icon><CaretTop /></el-icon>
        顶部
      </div>
    </el-backtop>
    <div class="partition">
      <Partition></Partition>
    </div>

    <div class="recommend">
      <div class="swiper">
        <Swiper></Swiper>
      </div>
      <div class="video-list">
        <VideoList :video-info-list="dataListTop6" :loading="isLoading"></VideoList>
      </div>
    </div>
    <div class="more">
      <MoreVideoList :video-info-list="dataList" :loading="isLoading"></MoreVideoList>
    </div>
  </div>
</template>
<script setup>

import Partition from "@/components/Partition.vue";
import Swiper from "@/components/Swiper.vue";
import VideoList from "@/components/VideoList.vue";
import MoreVideoList from "@/components/MoreVideoList.vue";

import {onMounted, onUnmounted, reactive, ref} from "vue";
import {useUserStore} from "@/stores/userInfoStore.js";
import emitter from "@/utils/emitter.js";
import {getRecommendList, getVideoList} from "@/api/api.js";

// onMounted(() => {
//   console.log("主页加载完成");
//   const userStore = useUserStore()
//   if(!userStore.userInfo.token){
//     console.log("用户未登录")
//     emitter.emit("showLogin",true)
//   }
// })
const dataListTop6 = ref([])
const dataList = ref([])
const isLoading = ref(true)
const queryParams = reactive({
  userId:0,
  page:1,
  pageSize:20
})
onMounted(async () => {


  setTimeout(()=>{
    // 展示Banner图
    emitter.emit("hasBanner",true) // 延迟，因为BasicLayout还没加载完
    emitter.emit("changeBgColor",{color:'white',hasColor:false}) // 菜单字体颜色为白色,不显示背景颜色
    // emitter.emit("changeBgColor",'white',false) // 菜单字体颜色为白色,不显示背景颜色
  },1)


  console.log("主页加载完成");
  // const res = await getVideoList()
  queryParams.userId = localStorage.getItem("userId") || 0
  const res = await getRecommendList(queryParams)

  console.log(res)
  dataListTop6.value = res.data.slice(0,6)
  dataList.value = res.data.slice(6,res.data.length)
  setTimeout(()=>{
    isLoading.value = false;
  },500)

})


onUnmounted(()=>{
  emitter.emit("hasBanner",false)
  // emitter.emit("changeBgColor",'black',true) // 菜单字体颜色为黑色,显示背景颜色为白色
  emitter.emit("changeBgColor",{color:'black',hasColor:true}) // 菜单字体颜色为白色,不显示背景颜色
})

</script>
<style scoped>
.partition{
  margin-top: 110px;
  width: 1380px;
}
.index-box{
  width: 100%;
  //padding:10px 45px;
  padding: 1% 3.5%;

}
.recommend{
  display: flex;
  .swiper{
    width: 530px;
    height: 360px;
  }
  .video-list{
    width: 850px;
    height: 460px;
    overflow: hidden;
    //background-color: blue;
  }
}
.more{
  width: 1400px;
}
</style>